<template>
    <div class="box">
        <div class="movie" v-for="sj in hotFilms" :key="sj.id" @click="xq" :id= sj.id>
            <!-- <p>{{sj.comingTitle}}</p> -->
            <div>
                <img :src="sj.img.replace('/w.h','')" alt="" class="left">
                <div class="center">
                    <p>{{sj.nm}}</p>
                    <span><b>{{sj.wish}}</b>人想看</span>
                    <span>{{sj.desc}}</span>
                    <span>{{sj.showInfo}}</span>
                </div>
                <div class="right" v-if="!sj.preShow" @click="getMovieData">
                    <!-- <span @click="getMovieData">预售</span> -->
                    <my-button type="danger">购票</my-button>
                </div>
                <div class="right" v-else @click="getMovieData">
                    <!-- <span @click="getMovieData">预售</span> -->
                    <my-button type='primary'>预售</my-button>
                </div>
            </div>
        </div>

        <p class="more" @click="moreMovie">
            <span>点击加载更多</span>
        </p>
    </div>
    <!-- .splice(sj.img.indexOf('/net') + 1,4) -->
</template>

<script>
    let lit = 12
    // import axios from 'axios'
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex'
    import MyButton from '@/components/MyButton.vue'
    export default {
        data() {
            return {
                lit
            };
        },
        computed: {
            ...mapState('hotFilms', ['hotFilms']),
            ...mapState("ct", ["ct"])
        },
        methods: {
            ...mapActions('hotFilms', ['getHotFilmsData']),
            getMovieData() {
                console.log(this.hotFilms);
            },

            moreMovie() {
                lit = lit + 12;
                if (lit <= 36) {
            this.getHotFilmsData({lit:lit,ct:this.ct})
                    if (lit == 36) {
                        document.querySelector('.more>span').style.display = 'none'
                    }
                }
            },
            xq(a) {
                this.$cookies.set('pId',a.currentTarget.id)
                // console.log(this.$cookies.get('pId')); 
                this.$router.push('/details')
            }
        },
        mounted() {
            lit = 12
            this.getHotFilmsData({lit:null,ct:this.ct})
        },
        components: {
            MyButton,
        }
    }
</script>
<style lang="scss" scoped>
    .box {
        width: 100%;
        height: 1.45rem;
        display: flex;
        align-items: center;
        background: #fff;


        >div.movie {
            width: 3.51rem;
            height: 1.45rem;
            padding: 0.12rem 0;
            position: relative;

            &::after {
                position: absolute;
                content: '';
                width: 2.65rem;
                transform: scaleY(0.5);
                border-bottom: 1px solid #999;
                bottom: 0;
                right: 0;
            }

            >p {
                height: 0.4rem;
                // background-color: orange;
                color: black;
                line-height: 0.4rem;
                font-size: 0.14rem;
                text-align: left;
            }

            >div {
                height: 0.9rem;
                // background-color: pink;
                display: flex;
                text-align: left;

                >.left {
                    width: 0.64rem;
                    height: 0.9rem;
                    // background-color: #fff;
                    margin-right: 0.12rem;
                }

                >.center {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    >p {
                        font-size: 0.16rem;
                        height: 0.26rem;
                        line-height: 0.26rem;
                        color: black;
                    }

                    >span {
                        height: 0.18rem;
                        line-height: 0.20rem;
                        font-size: 0.12rem;
                        color: #666666;
                        overflow: hidden;

                        >b {
                            color: #ffb400;
                            font-size: 0.16rem;
                        }
                    }
                }

                >.right {
                    margin-top: 0.28rem;
                    width: 0.64rem;
                    height: 0.28rem;
                    float: right;
                    color: #fff;
                    font-size: 0.12rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }


        .more {
            text-align: center;
            color: #000;
            font-size: 0.16rem;
        }
    }
</style>